<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title>商品筛选</title>
    <style>
        body{
            font-family: '黑体';
        }
        main{
            width: 1048px;
            height: 430px;
            margin: 80px auto;
            border: 1px solid #ccc;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 100%;
            height: 100%;
        }
        li{
            width: 100%;
            height: 56px;
            border-bottom: 1px dashed #ccc;
        }
        li:nth-child(1){
            height: 93px;
        }
        li:nth-last-of-type(1){
            border-bottom: none;
            /*line-height: 55px;*/
            padding-top: 12px;
        }
        p{
            margin: 0;
            width: 100%;
            height: 100%;
            line-height: 55px;
        }
        .firstp{
            height: 50%;
            line-height: 46px;
        }
        .firstp:nth-last-child(1){
            margin-left: 137px;
        }
        .fonttle{
            display: inline-block;
            width: 130px;
            height: 100%;
            text-align: right;
        }
        a{
            text-decoration: none;
            margin: 7px;
            padding: 3px;
        }
        a.selected,
        a:hover{
            background-color: #f25833;
            color: #fff;
        }
        #clear{
            color: #f63;
            background-color: transparent;
            display: none;
        }
        /*#clear:hover{
            background-color: transparent;
        }*/
        /*#lastp span:nth-child(2) span{
            border: 1.5px solid #f90;
            margin: 5px;
            padding: 5px;
        }*/
        /*#lastp span div{
            display: inline-block;
            margin-left: 3px;
            color: #ccc;
        }*/
        #lastp a{
            text-decoration: none;
            color: #f90;
            display: none;
        }
        li.choose .intro span
        {
            border: 1px solid #f63;
            padding: 3px;
            margin-right: 10px;
            cursor: pointer;
            display: none;
        }
        li.choose .intro span em{
            font-style: normal;
            color: #ccc;
        }
        li.choose .intro span em:hover{
            color: #f63;
        }
        </style>
</head>

<body>
    <main>
        <ul>
            <li>
                <p class="firstp"><span class="fonttle">品牌：</span>
                    <a href="#">苹果</a>
                    <a href="#">小米</a>
                    <a href="#">华为</a>
                    <a href="#">三星</a>
                    <a href="#">魅族</a>
                    <a href="#">OPPO</a>
                    <a href="#">中兴</a>
                    <a href="#">联想</a>
                    <a href="#">酷派</a>
                    <a href="#">乐视</a>
                    <a href="#">vivo</a>
                    <a href="#">奇酷</a>
                    <a href="#">锤子</a>
                    <a href="#">坚果</a>
                </p>
                <p class="firstp">
                    <a href="#">苹果</a>
                    <a href="#">小米</a>
                    <a href="#">华为</a>
                    <a href="#">三星</a>
                    <a href="#">魅族</a>
                    <a href="#">OPPO</a>
                    <a href="#">中兴</a>
                    <a href="#">联想</a>
                    <a href="#">酷派</a>
                    <a href="#">乐视</a>
                    <a href="#">奇酷</a>
                    <a href="#">诺基亚</a>
                </p>
            </li>
            <li>
                <p><span class="fonttle">价格：</span>
                    <a href="#">500元以下</a>
                    <a href="#">500-1000元</a>
                    <a href="#">1000-1500元</a>
                    <a href="#">1500-2000元</a>
                    <a href="#">2000-3000元</a>
                    <a href="#">3000-4000元</a>
                    <a href="#">4000元以上</a>
                </p>
            </li>
            <li>
                <p><span class="fonttle">主屏尺寸：</span>
                    <a href="#">6.0英寸以上</a>
                    <a href="#">5.5-6.0英寸</a>
                    <a href="#">5.0-5.5英寸</a>
                    <a href="#">4.5-5.0英寸</a>
                    <a href="#">4.0-4.5英寸</a>
                    <a href="#">4.0英寸以下</a>
                </p>
            </li>
            <li>
                <p><span class="fonttle">网络：</span>
                    <a href="#">全网通</a>
                    <a href="#">双4G</a>
                    <a href="#">移动4G</a>
                    <a href="#">联通4G</a>
                    <a href="#">电信4G</a>
                </p>
            </li>
            <li>
                <p><span class="fonttle">核心数：</span>
                    <a href="#">十核</a>
                    <a href="#">八核</a>
                    <a href="#">双四核</a>
                    <a href="#">四核</a>
                    <a href="#">双核及以下</a>
                </p>
            </li>
            <li>
                <p><span class="fonttle">特性：</span>
                    <a href="#">大屏幕</a>
                    <a href="#">双卡双待</a>
                    <a href="#">指纹识别</a>
                    <a href="#">千元机</a>
                    <a href="#">拍照神器</a>
                </p>
            </li>
            <li class="choose">
                <span class="fonttle">您已选择：</span>
                <span class="intro">
                    <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </span>
                <a href="#" id="clear">清除筛选条件</a>
            </li>
        </ul>
    </main>
</body>

</html>

<script>

    // $('li a').not('#clear').click(function () {

    //     $('#lastp #title').append('<span>' + $(this).text() + '<div>&times;</div></span>')

    //     $('#lastp a').show()

    // })

    // $('#lastp a').click(function () {
    //     // console.log('aaa')
    //     $('#title span').remove()
    //     $('#lastp a').hide()

    // })
    // if($('title span').length > 1){
    // $('#title').each(function (index) {

    //     $(this).eq(index).click(function () {

    //         $(this).eq(index).remove()

    //         // if($('#titl').index==0){
    //         $('#lastp a').hide()

    //         // }
    //     })
    // })
    // }

    // 给选中的添加类名 其他移除
    $('li a').click(function () {
        $(this).addClass('selected').siblings().removeClass('selected')
        // 获取a所在的li索引
        var li_index = $(this).parents('li').index();
        // 获取选中的内容
        var text = $(this).text() + '<em>&times;</em>';

        $('.choose .intro span').eq(li_index).html(text).css('display', 'inline-block')

        // 点击选择的span 关闭
        $('.choose .intro span').click(function () {
            var index = $(this).index()
            $('li').not('.choose').eq(index).find('a').removeClass('selected');
            // 清空选中内容并隐藏
            $(this).empty().css('display', 'none')

            clearAll()

        })

        clearAll()

        function clearAll() {

            // 获取已经选中的选项的个数（span不为空的个数）
            var length = $('.choose .intro span').not(':empty').length;
            console.log(length)
            if (length > 0) {
                // var clear = '<a href="javascript:;" id="clear" class="clear"';
                $('.choose a').show();

                // 点击清空 清除所有
                $('#clear').click(function () {
                    $('.choose .intro span').html('').css('display', 'none')
                    $('li').not('.choose').find('a').removeClass('selected')
                    $('.choose a').hide();

                })
            }else{
                    $('.choose a').hide();                
            }
        }

    })


</script>